<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较大小的案例watch实现</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        数值1:<input type="number" v-model="num1"><br/>
        数值2:<input type="number" v-model="num2"><br/>
        比较大小:{{compareResult}}
    </div>


    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : '比较大小的案例',
                num1 : 0,
                num2 : 0,
                compareResult : ''
            },
            watch : {
                //监视num1
                num1 : {
                    // handler(newValue , oldValue){
                    //     console.log(newValue , oldValue)
                    // }
                    immediate : true,
                    handler(val){
                        console.log(val)
                        let result = val - this.num2
                        setTimeout(() => {
                            //这个函数也不是Vue管理的,是javascript引擎负责管理的,调用这个函数的还是window
                            //箭头函数是没有this的，只能向上一级找this,上一级是num1,num1是Vue实例的属性，所以this是Vue实例
                            console.log(this)
                            if(result == 0){
                                this.compareResult = val + ' = ' + this.num2
                            }else if(result >0){
                                this.compareResult = val + ' > ' + this.num2
                            }else{
                                this.compareResult = val + ' < ' + this.num2
                            }
                        } , 3000)

                    }
                },
                //监听num2
                num2 : {
                    immediate: true,
                    handler(val) {
                        console.log(val)
                        let result = this.num1 - val
                        setTimeout(() => {
                            //虽然这个函数是箭头函数,但是this是Vue实例
                            console.log(this)
                            if(result == 0){
                                this.compareResult = this.num1 + ' = ' + val
                            }else if(result > 0){
                                this.compareResult = this.num1 + ' > ' + val
                            }else {
                                this.compareResult = this.num1 + ' < ' + val
                            }
                        },3000)


                        //这里的this指向的是window 所以 这里的  this.compareResult 不能使用
                        // setTimeout(function (){
                        //     //虽然这个函数是普通函数,但是这个函数并不是Vue管理的，是window负责调用的
                        //     //所以这个普通函数当中的this是window
                        //     console.log(result)
                        //     if(result == 0){
                        //         this.compareResult = this.num1 + ' = ' + val
                        //     }else if(result > 0){
                        //         this.compareResult = this.num1 + ' > ' + val
                        //     }else{
                        //         console.log(1111)
                        //         this.compareResult = this.num1 + ' < ' + val
                        //     }
                        // } , 1000 * 3)

                    }
                }
            }
        })
    </script>




</body>
</html>